<template>
	<view v-if="data">
		<!-- 地图 -->
		<map style="width: 100%; height: 400rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>
		
		
		
		<!-- 订单状态 -->
		<!-- <view class="cbg-white">
			<view v-if="data.order.status==7" style="color: red;padding: 20rpx 0 20rpx 20rpx;font-weight: bold;">订单已取消
			</view>
			<view v-else>
				<view v-if="data.order.status==8"></view>
				<view v-else class="cflex-r " style="height: 160rpx;">
					<view class="cflex-c-c u-m-20" style="width: 100%;">
						<image mode="widthFix" :src="statusStar" style="width: 100%;"></image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 时间 -->
		<view v-if="data.order.status == 1 || data.order.status == 6|| data.order.status == 9" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>订单提交时间：{{data.order.addtime}}</view>
		</view>
		<view v-if="data.order.status == 2" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>社工接单时间：{{data.order.jietime}}</view>
		</view>
		<view v-if="data.order.status == 3" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>社工出发时间：{{data.order.chufatime}}</view>
		</view>
		<view v-if="data.order.status == 4" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>社工到达时间：{{data.order.daodatime}}</view>
		</view>
		<view v-if="data.order.status == 5" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>开始服务时间：{{data.order.starTime}}</view>
		</view>
		<view v-if="data.order.status == 6" class="u-p-25"
			style="background-color: #FFFFFF;margin-top: 20rpx;font-weight: 500;">
			<view>开始服务时间：{{data.order.starTime}}</view>
			<view style="margin: 25rpx 0;">结束服务时间：{{data.order.endtime}}</view>
			<view>服务时长：{{data.orderTimeList.length}}小时</view>
		</view>
		<!-- 内容 -->
		<view class="cflex-r u-m-t-20 u-p-30" style="background-color: #FFFFFF;">
			<image mode="aspectFill" :src="data.order.iPhoto"
				style="width: 140rpx;height: 130rpx;margin-left: 18rpx;border-radius: 15rpx;"></image>
			<view class="cflex-c u-m-l-15">
				<text style="font-size: 35rpx; font-weight: bold;margin: 15rpx 0;">{{data.order.iName}}</text>
				<text style="color: #FF5000;font-size: 33rpx;">￥{{data.order.totalPrice}}</text>
				<view class="cflex-r" style="align-items: center;margin: 10rpx 0;">
					<image src="../../static/order/shijian.png" style="width: 30rpx;height: 30rpx;"></image>
					
					<text style="font-weight: 500;margin-left: 10rpx;font-size: 25rpx;">{{data.order.timeSpan}}小时</text>
				</view>
			</view>
			<view class="cflex-r" style="flex: 1; align-items: center;position: relative;">
				<text
					style="color: #9E9E9E;position: absolute;right: 0;font-size: 30rpx;margin-right: -10rpx;">×{{data.orderTimeList.length}}</text>
			</view>
		</view>
		<!-- 支付 -->
		<view class="cflex-c u-p-25 u-m-t-20" style="background-color: #FFFFFF;">
			<view class="cflex-c">
				<view class="cflex-r" style="justify-content: space-between;font-weight: bold;">
					<text style="font-size: 30rpx;">合计(实付)</text>
					<text
						style="color: #FF5000;font-size: 33rpx;">￥{{data.order.totalPrice*data.orderTimeList.length}}</text>
				</view>
				<view class="cflex-r"
					style="justify-content: space-between;margin: 20rpx 0;font-size: 28rpx;color: #666666;">
					<text>出行方式</text>
					<text>{{data.order.chuXing==0?'地铁/公交':'出租/滴滴'}}</text>
				</view>
				<view class="cflex-r" style="justify-content: space-between;font-size: 28rpx;color: #666666;">
					<text>社工出行车费</text>
					<text>￥{{data.order.chuXingPrice}}</text>
				</view>
			</view>
			<!-- 分割线 -->
			<view style="margin: 30rpx 0;">
				<u-divider border-color="#DDDCDC" :use-slot="false" half-width="700"></u-divider>
			</view>
			<!-- 订单详情 -->
			<view>
				<view class="cflex-c ddText">
					<text style="color: #333333;font-weight: bold;font-size: 30rpx;">订单详情</text>
					<text>社工姓名：{{data.order.wName}}</text>
					<text>联系人：{{data.order.uName}}</text>
					<text>联系方式：{{data.order.tel}}</text>
					<text>地址：{{data.order.addressDes}}</text>
					<text v-if="data.order.status==7">订单状态：已取消</text>
					<text v-if="data.order.status==8">订单状态：社工已取消</text>
					<text v-if="data.order.status==0">订单状态：待支付 </text>
					<text v-if="data.order.status==1">订单状态：等待社工接单</text>
					<text v-if="data.order.status==2">订单状态：社工已接单</text>
					<text v-if="data.order.status==3">订单状态：社工已出发</text>
					<text v-if="data.order.status==4">订单状态：社工已到达</text>
					<text v-if="data.order.status==5">订单状态：社工服务中</text>
					<text v-if="data.order.status==6">订单状态：社工已完成服务</text>
					<text>支付方式：{{data.order.payType==0?'余额':data.order.payType==2?'支付宝':'微信'}}支付</text>
				</view>

				<view class="cflex-c" style="margin-bottom: 200rpx;" v-if="data.order.isPingJia == 1">
					<view style="margin: 30rpx 0;">
						<u-divider border-color="#DDDCDC" :use-slot="false" half-width="700"></u-divider>
					</view>
					<text style="color: #333333;font-weight: bold;font-size: 30rpx;">已评价</text>
					<view class="cflex-r" style="align-items: center;margin: 20rpx 0;">
						<text style="color: #666666;">评分：</text>
						<image :src="'../../static/star/smallStar'+data.pingJia.score+'.png'"
							style="width: 125rpx;height: 0;" use-slot="false" mode="widthFix"></image>
					</view>
					<text
						style="color: #666666;line-height: 50rpx;">评价内容：{{data.pingJia.content ? data.pingJia.content : '暂无评论'}}</text>
				</view>

			</view>
			<!-- 按钮 -->
			<view class="cflex-r" style="justify-content: center;align-items: center;">
				<view v-if="data.order.status == 9 && data.order.isPingJia == 0" @tap="show = true"
					style="border: 2px solid #FF5300;color: #FF5300;width: 400rpx; padding: 8rpx;border-radius: 20px;font-weight: bold;text-align: center;margin: 50rpx 0;">
					评价社工</view>
			</view>
			<!-- 弹出层 -->
			<view>
				<u-popup v-model="show" mode="bottom">
					<view style="width: 100%; height: 620rpx;">
						<view class="cflex-c" style="justify-content: center;align-items: center;">
							<view class="u-m-t-10"
								style="width: 50rpx;height: 10rpx;background-color: #AAAAAA;border-radius: 15px;">
							</view>
							<text class="u-m-t-10" style="font-weight: bold;font-size: 33rpx;">请为社工打分</text>
						</view>
						<!-- 星星 -->
						<view class="cflex-r u-m-t-30" style="justify-content: center;" @tap="changeStar($event)">
							<image :src="nowstar" style="width: 420rpx;height: 65rpx;"></image>
						</view>
						<!-- 意见 -->
						<view class="cflex-r u-m-t-50" style="justify-content: center;">
							<view class="u-p-30 u-p-b-60"
								style="background-color: #F2F2F2;width: 620rpx; border-radius: 30rpx;">
								<u-input v-model="inputValue" type="textarea" :placeholder="placeholder" auto-height />
							</view>
						</view>
						<!-- 提交按钮 -->
						<view class="cflex-r u-m-t-40" style="justify-content: center;">
							<view
								style="width: 620rpx; background-color: #4578F7;text-align: center;padding: 20rpx 0;font-weight: bold;border-radius: 20rpx;color: #fff;"
								@tap="pjClick">提交评价</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- 底部 -->
		<view style="height: 120rpx;"></view>
		<view style="position: fixed;bottom: 0;background-color: #FFFFFF;width: 100%;height: 120rpx;">
			<view v-if="data.order.status==6" class="cflex-r u-m-r-20" style="margin-top: 20rpx;float: right;">
				<view v-if="data.order.isShouHou == 0 " @tap="goShouHou(data.order)"
					style="border: 2rpx solid #5F5F5F; width: 200rpx;color: #5F5F5F;text-align: center;border-radius: 20px;padding: 10rpx;">
					申请售后</view>
				<view @tap="goFish()" class="u-m-l-20" v-if="data.order.status == 6"
					style="background-color: #FF5300; width: 200rpx;color: #FFFFFF;text-align: center;border-radius: 20px;padding: 10rpx;">
					完成订单</view>
			</view>

			<view v-else class="cflex-r u-m-r-20" style="margin-top: 20rpx;float: right;">
				<view @tap="goCancel()" v-if="data.order.status < 3"
					style="border: 2rpx solid #5F5F5F; width: 200rpx;color: #5F5F5F;text-align: center;border-radius: 20px;padding: 10rpx;">
					取消订单</view>
				<view class="u-m-l-20"
				 v-if="data.order.status ==0"
					style="background-color: #FF5300; width: 200rpx;color: #FFFFFF;text-align: center;border-radius: 20px;padding: 10rpx;"
					@tap="telClick(data.order)" >
					联系社工</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				totalTime: '',
				qxShow: true,
				data: null,

				// 传递参数
				id: '',
				inputValue: '',
				score: '',
				orderSn: '',

				placeholder: '为了下次给您更好的服务，请留下宝贵的意见这对您和我们都很重要',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/my/z5.png',
					width: 30,
					height: 30
				}],
				show: false,
				value: 1,
				colors: ['#ffc454', '#ffb409', '#ff9500'],
				nowstar: "../../static/star/star1.png",
				statusStar: "../../static/order/orderinfo/order1.png"
			}
		},
		onShow() {
			this.detailReq();
			this.$nextTick(() => {
				// // //console.log(this.$refs)
			})
		},
		onLoad({
			id
		}) {
			// // //console.log(id);
			this.id = id;
		},
		mounted() {
			this.$nextTick(() => {
				// // //console.log(this.$refs)
			})

		},

		methods: {
			goFish() {

				this.$request("worker/order/userChangeOrderStatus", {
					orderId: this.id,
					// status: 9
				}).then(res => {
					this.detailReq();
				})
			},
			// 再来一单按钮
			goAgain({
				wid
			}) {
				//console.log(wid);
				uni.navigateTo({
					url: "../jishi/jishi_info?id=" + wid
				})
			},
			// 申请售后按钮
			goShouHou(data) {
				//console.log("==========>",data.isShouHou);
				if (data.isShouHou == 1) {
					uni.showToast({
						title: "此订单已经申请过售后",
						icon: "none"
					})
					return;
				} else {
					uni.navigateTo({
						url: "../my/shou_hou?id=" + data.id
					})
				}
			},
			// 联系社工按钮
			telClick(data) {
				// // //console.log("==============>",data);
				uni.makePhoneCall({
					phoneNumber: data.wPhone
				});
			},
			detailReq() {
				this.$request("kehu/order/orderDetail", {
					id: this.id
				}).then(res => {
					//console.log("res",res);
					if (res.data.order.status == 7) {
						this.qxShow = false
					}
					this.data = res.data;
					this.orderSn = res.data.order.orderSn;
					let status = res.data.order.status;
					this.statusStar = "../../static/order/orderinfo/order" + status + ".png";

					// 地图
					this.latitude = res.data.lat;
					this.longitude = res.data.lng;
					
					
					this.covers[0].latitude = res.data.lat;
					this.covers[0].longitude = res.data.lng;
					//console.log("cover",this.covers);


					// 计算服务时长
					let star = res.data.order.starTime
					star = star.substring(0, 19);
					star = star.replace(/-/g, '/');
					let end = res.data.order.endtime
					end = end.substring(0, 19);
					end = end.replace(/-/g, '/');

					var starTime = new Date(star).getTime();
					var endTime = new Date(end).getTime();

					let fwTime = (endTime - starTime) / 1000 / 60;
					let totalTime = Math.floor(fwTime);
					this.totalTime = totalTime + '小时';

				})
			},
			pjClick() {
				this.$request("kehu/jishi/addAppraise", {
					wid: this.data.order.wid,
					uid: this.data.order.uid,
					iid: this.data.order.iid,
					oid: this.data.order.id,
					content: this.inputValue,
					score: this.score
				}).then(res => {
					//console.log(res);
					if (res.code == 0) {
						this.show = false;
						uni.showToast({
							icon: "none",
							title: '评价成功',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);

					}
				})
			},
			goCancel() {
				uni.navigateTo({
					url: `order_cancel?orderSn=${this.orderSn}`
				})
			},
			async changeStar(event) { //星星改变
				let res = await this.screenWidth();
				// // //console.log(res)
				let starLeft = event.target.offsetLeft;
				let starWidth = res - (starLeft * 2);
				let eachStar = starWidth / 5;
				let clickX = event.target.x;
				let starPos = Math.floor(((clickX - starLeft) / eachStar) + 1);
				this.score = starPos;
				this.nowstar = "../../static/star/star" + starPos + ".png"
			},
			screenWidth() { //计算手机屏幕的宽度
				return new Promise(function(resolve, reject) {
					uni.getSystemInfo({
						success: res => {
							resolve(res.windowWidth);
						}
					})
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.ddText {
		>text {
			margin: 8rpx 0;
			color: #666666;
			font-weight: 500;
		}
	}
</style>